<!doctype html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" th:href="@{/js/index2.css}">
    <link rel="stylesheet" href="https://yeqian-blog.oss-cn-beijing.aliyuncs.com/js/index.css">
    <style>
        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }

        .el-pagination {
            text-align: right;
            padding: 15px;
        }

        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }

        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }

        .avatars {
            width: 178px;
            height: 178px;
            display: block;
        }

    </style>
    <title>但愿人长久-标签管理</title>
</head>
<body class="hold-transition">
<div id="app" v-cloak>
    <div class="content-header" style="  padding: 10px;
    border-radius: 4px;
    background: white;
    margin-bottom: 10px;

">

        <el-breadcrumb>
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item><a href="/">文集管理</a></el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <div class="app-container">
        <div class="box">
            <div style="  padding: 10px;">
                <el-button @click="handleCreate()" type="primary" size="small" plain>新建文集</el-button>
            </div>
            <el-table
                    size="medium "
                    stripe highlight-current-row
                    current-row-key="id"
                    :data="tableData"
                    style="width: 100%; padding: 15px;border-radius: 4px;"
            >
                <el-table-column
                        type="index"
                        align="center"
                        label="序号"
                        width="230">
                </el-table-column>
                <el-table-column
                        prop="name"
                        align="center"
                        label="文集名"
                        width="230">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="introduce"
                        label="文集介绍"
                        width="230">
                </el-table-column>
                <el-table-column
                        prop="img"
                        label="文集封面"
                        align="center"
                        width="230">
                    <template scope="scope">
                        <el-image  :src="scope.row.img" style="width: 40px; height: 40px"
                                   class="head_pic"/>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="articleCount"
                        align="center"
                        width="230"
                        label="标签对应的文章数量">
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" @click="handleUpdate(scope.row)" plain>编辑</el-button>
                        <el-button size="mini" type="danger" @click="handleDelete(scope.row)" plain>删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <div class="pagination-container">
            <el-pagination
                    class="pagiantion"
                    @current-change="handleCurrentChange"
                    :current-page="pagination.currentPage"
                    :page-size="pagination.pageSize"
                    layout="total, pager, jumper"
                    :total="pagination.total">
            </el-pagination>

        </div>
        <el-dialog title="新建文集" :visible.sync="dialogFormVisible">
            <el-form :model="addForm" ref="addForm" :rules="rules">
                <el-form-item label="文集名称" :label-width="formLabelWidth" prop="name">
                    <el-input v-model="addForm.name"></el-input>
                </el-form-item>
                <el-form-item label="文集介绍" :label-width="formLabelWidth">
                    <el-input v-model="addForm.introduce"></el-input>
                </el-form-item>
                <el-form-item label="封面上传" :label-width="formLabelWidth">
                    <el-upload
                            class="avatar-uploader"
                            action="/image/tagUpload"
                            name="imgFile"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload">
                        <img v-if="imageUrl" :src="imageUrl" class="avatars">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false" plain>取 消</el-button>
                <el-button type="primary" @click="handleAdd()" plain>确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog title="编辑文集" :visible.sync="dialogFormVisibleEdit">
            <el-form :model="addForm" ref="addForm"  :rules="rules">
                <el-form-item label="文集名称" :label-width="formLabelWidth" prop="name">
                    <el-input v-model="addForm.name"></el-input>
                </el-form-item>
                <el-form-item label="文集介绍" :label-width="formLabelWidth" prop="introduce">
                    <el-input v-model="addForm.introduce"></el-input>
                </el-form-item>
                <el-form-item label="封面图片" :label-width="formLabelWidth">
                    <el-upload
                            class="avatar-uploader"
                            action="/setmeal/upload"
                            :auto-upload="autoUpload"
                            name="imgFile"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload">
                        <img v-if="imageUrl" :src="imageUrl" class="avatars">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisibleEdit = false" plain>取 消</el-button>
                <el-button type="primary" @click="handleEdit()" plain>确 定</el-button>
            </div>
        </el-dialog>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://yeqian-blog.oss-cn-beijing.aliyuncs.com/js/axios-0.18.0.js"></script>
<script src="https://yeqian-blog.oss-cn-beijing.aliyuncs.com/js/index.js"></script>
<script type="text/javascript" src="https://yeqian-blog.oss-cn-beijing.aliyuncs.com/js/jquery.min.js"></script>
<script type="text/javascript">
    new Vue({
        el: "#app",
        data: {
            imageUrl: '',
            tableData: [],
            totalData: {},
            autoUpload:'autoUpload',
            statusCode: 0,//表示此页为回收站状态的博客 状态：0：发布，1：草稿,2:回收站
            pagination: {//分页相关模型数据
                currentPage: 1,//当前页码
                pageSize: 5,//每页显示的记录数
                total: 0,//总记录数
                queryString: 625 //查询条件 此处暂无
            },
            addForm: {},
            formLabelWidth: '120px',
            dialogFormVisible: false, //控制添加窗口显示隐藏
            dialogFormVisibleEdit: false, //控制编辑窗口显示隐藏
            rules: { //自定义校验规则
                name: [
                    {required: true, message: '标签名不能为空', trigger: 'blur'}
                ]
            }/*,
            srcList: [
                'https://yeqian-blog.oss-cn-beijing.aliyuncs.com/tag/2021/01/016e1c3d86-7156-4703-a592-e6f9213e4de5.jpg',
                'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
            ]*/
        },
        created() {
            this.findPage();//当VUE对象初始化完成分页查询
        },
        methods: {
            handleAvatarSuccess(response, file) {
                //这里的response相当于我们自己发送的ajax请求的响应中的res.data
                //为模型数据imgUrl赋值，用于页面图片预览
                this.imageUrl = response.data;
                this.$message({
                    type: response.flag ? 'success' : 'error',
                    message: response.message
                });

                //设置模型数据（图片名称），后续提交ajax请求时会提交到后台最终保存到数据库
                this.addForm.img = response.data;
            },
            //上传图片之前执行
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isJPG) {
                    this.$message.error('上传套餐图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传套餐图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },

            /**
             * 重置表单
             * */
            resetForm() {
                if (this.$refs['addForm'] !== undefined) {
                    this.$refs['addForm'].resetFields();
                    this.addForm = {};
                    this.imageUrl = null;
                }
            },
            /**
             * 分页
             * */
            findPage() {
                axios.post("/tag/search", this.pagination).then((res) => {
                    this.tableData = res.data.data.rows;
                    this.pagination.total = res.data.data.total;
                });
            },
            /**
             * 弹出添加框
             */
            handleCreate() {
                this.resetForm();
                this.dialogFormVisible = true
            },
            /**
             * 添加标签
             */
            handleAdd() {
                axios.post("/tag", this.addForm).then((res) => {
                    this.$message({
                        type: response.flag ? 'success' : 'error',
                        message: response.message
                    });
                });
                this.dialogFormVisible = false;
                this.findPage();
            },
            /**
             * 弹出编辑框
             */
            handleUpdate(row) {  //进入编辑文档页面
                this.resetForm();

                axios.get("/tag/"+row.id).then((res)=>{
                    if (res.data.flag){
                        this.addForm=res.data.data;
                        this.imageUrl=res.data.data.img;
                    }
                })
                this.dialogFormVisibleEdit = true;
            },
            /**
             * 编辑标签
             * */
            handleEdit(){
                axios.put("/tag", this.addForm).then((res) => {
                    this.$message({
                        type: response.flag ? 'success' : 'error',
                        message: response.message
                    });
                });
                this.dialogFormVisibleEdit = false;
                this.findPage();

            },
            /**
             * 切换页码
             */
            handleCurrentChange(currentPage) {
                // 设置最新的页码
                this.pagination.currentPage = currentPage;
                //当切换页码的时候，需要重新调用findpPageF进行分页查询
                this.findPage();
            },
            /**
             * 删除此标签
             * */
            handleDelete(row) {
                this.$confirm("您确定要删除当前数据吗？", "提示", {
                    type: "warning"
                }).then(() => {
                    axios.delete("/tag/" + row.id).then((res) => {
                        if (res.data.flag) {
                            this.$message.success(res.data.message)
                        }

                        this.findPage();
                    });
                }).catch(() => {
                    console.log("用户点击了取消按钮")
                }).finally(() => {

                });
            }

        }
    });
</script>
</body>
</html>